<template>
	<transition name="preview"
	            :duration="300"
	>
		<div class="news-preview-container"
		     v-if="modelValue"
		>
			<div class="mask"></div>
			<div class="container">
				<svg-icon icon="close"
				          @click="closeHandler"
				          class="icon"/>
				<el-scrollbar>
					<div class="main">
						<div class="title">{{ newsData['news_title'] }}</div>
						<div class="date">{{ newsData['news_time'] }}</div>
						<div class="content"
						     v-html="newsData.content"
						></div>
					</div>
				</el-scrollbar>
			</div>
		</div>
	</transition>
</template>

<script setup>
import {watch, ref} from "vue";
import {getNewsById} from "@/api/news";


const props = defineProps({
	modelValue: {
		type: Boolean,
		required: true
	},
	newsId: {
		type: String,
		required: true
	}
})
const emit = defineEmits(['update:modelValue'])
const closeHandler = () => {
	emit('update:modelValue', false)
}
const newsData = ref({})

const initNews = async () => {
	const {data, success} = await getNewsById(props.newsId)
	if (!success) return
	newsData.value = {...data}
}
watch(() => props.modelValue, value => {
	if (!value || !props.newsId) return
	initNews()
})
</script>

<style scoped lang="scss">
.preview-enter-active .container,
.preview-leave-active .container {
	transition: all .3s ease;
}

.preview-enter-from .container,
.preview-leave-to .container {
	opacity: 0;
	transform: translate(-50%, -50%) scale(.8) !important;
}

.preview-enter-active .mask,
.preview-leave-active .mask {
	transition: opacity .2s ease;
}

.preview-enter-from .mask,
.preview-leave-to .mask {
	opacity: 0;
}

.news-preview-container {
	position: fixed;
	inset: 0 0 0 0;
	z-index: 999;
	overflow: hidden;

	.el-scrollbar {
		width: 100%;
	}

	.mask {
		position: absolute;
		inset: 0 0 0 0;
		background: rgba(0, 0, 0, .5);
	}

	.container {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 75vw;
		height: 88vh;
		min-width: 800px;
		background: #fff;
		border-radius: 4px;
		box-shadow: 0 0 18px rgba(0, 0, 0, .18);
		z-index: 999;
		overflow: hidden;
		display: flex;
		flex-flow: column nowrap;
		align-items: center;

		.main {
			width: 100%;
			height: 100%;
			overflow: auto;
			padding: 20px;
			box-sizing: border-box;
			background: #ffffff;

			.content {
				width: 46.875rem;
				font-size: 1.125rem;
				color: #333;
				margin: 0 auto 1.125rem;
				background: #fff;
				display: flex;
				flex-flow: column;

			}

			.title {
				font-family: SourceHanSansCN-Regular, "Microsoft YaHei", serif;
				font-size: 1.5rem;
				color: #333;
				padding-bottom: 1.25rem;
				text-align: center;
				background: #fff;
			}

			.date {
				font-family: ArialMT, "Microsoft YaHei", serif;
				font-size: 1.125rem;
				color: #999;
				padding-bottom: 1.875rem;
				text-align: center;
				background: #fff;
			}
		}
	}

	.icon {
		position: absolute;
		right: 10px;
		top: 10px;
		font-size: 24px;
		transition: color .3s ease;
		z-index: 999;
	}
}
</style>